<template>
      <div :class="{'bg-write' : propData.isTransparentBackground}">
            <div class="constraint comm-p-70">
                  <div class="focus-us flex jus-space-bet ali-center">
                        <p>关注我们</p>
                        <ul class="flex">
                              <li class="flex">
                                    <svg t="1697473354973" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                          xmlns="http://www.w3.org/2000/svg" p-id="7535" width="30" height="30">
                                          <path d="M236.24 323.769c0 24.005 19.32 43.325 43.325 43.325s43.326-19.32 43.326-43.325c0-24.005-19.321-43.325-43.326-43.325-24.004 0-43.325 19.32-43.325 43.325z m336.064 223.067c0 18.735 15.223 33.958 33.958 33.958s33.958-15.223 33.958-33.958-15.223-33.958-33.958-33.958-33.958 15.223-33.958 33.958zM456.38 323.769c0 24.005 19.32 43.325 43.325 43.325 24.005 0 43.325-19.32 43.325-43.325 0-24.005-19.32-43.325-43.325-43.325-24.005 0-43.325 19.32-43.325 43.325z"
                                                p-id="7536" fill="#515151"></path>
                                          <path d="M858.017 0H165.983C74.648 0 0.293 74.356 0.293 166.276v690.863c0 91.92 74.355 166.276 165.69 166.276h692.034c91.335 0 165.69-74.356 165.69-166.276V166.276C1023.707 74.94 949.352 0 858.017 0zM384.366 686.18c-38.642 0-69.672-8.197-108.899-15.808L167.154 724.82l31.03-93.09C120.316 577.28 74.063 507.022 74.063 422.128c0-147.54 139.929-264.05 310.303-264.05 152.81 0 286.298 93.09 313.23 217.798a255.341 255.341 0 0 0-29.859-1.757c-147.54 0-264.05 110.07-264.05 245.315 0 22.834 3.513 44.496 9.367 64.988-9.367 1.171-18.735 1.757-28.688 1.757z m457.843 108.313l23.42 77.283-84.895-46.838c-31.03 7.61-62.06 15.808-93.09 15.808-147.541 0-264.051-100.703-264.051-225.41 0-124.12 116.51-225.408 264.05-225.408 139.344 0 263.465 101.288 263.465 225.409-0.585 70.843-46.838 132.903-108.899 179.156z"
                                                p-id="7537" fill="#515151"></path>
                                          <path d="M741.507 546.836c0 18.735 15.223 33.958 33.958 33.958s33.958-15.223 33.958-33.958-15.223-33.958-33.958-33.958c-19.32 0-33.958 15.223-33.958 33.958z"
                                                p-id="7538" fill="#515151"></path>
                                    </svg>
                              </li>
                              <li class="flex mar-lft">
                                    <svg t="1697474872955" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                          xmlns="http://www.w3.org/2000/svg" p-id="111935" width="30" height="30">
                                          <path d="M832 0a192 192 0 0 1 192 192v640a192 192 0 0 1-192 192H192a192 192 0 0 1-192-192V192a192 192 0 0 1 192-192h640z m-224 672c4.608 12.64 13.6 24.128 26.048 33.28a76.8 76.8 0 0 1 15.936 30.336c0 13.12 10.496 24.896 26.56 29.92 16.064 5.024 34.56 2.24 46.848-7.04 12.32-9.248 16-23.168 9.344-35.264-6.656-12.096-22.336-19.968-39.744-19.968a171.072 171.072 0 0 1-46.624-15.36c-9.92-8.384-23.488-14.08-38.368-15.904zM448.544 256C306.88 256 192 354.496 192 476a209.216 209.216 0 0 0 95.296 170.752l-15.776 64.416a20.16 20.16 0 0 0 6.816 20.416 19.264 19.264 0 0 0 21.12 2.24l88.224-44.608a290.88 290.88 0 0 0 60.864 6.784 296.256 296.256 0 0 0 67.776-8c-3.84-12.8-6.24-25.984-7.168-39.328a246.912 246.912 0 0 1-90.752 5.28c-4.864-0.576-9.6-1.472-14.336-2.304-7.424-1.28-14.88-2.496-21.984-4.352l-48.64 24.64c-3.52-1.536-6.912-3.296-10.368-4.928l9.6-38.976a219.008 219.008 0 0 1-23.68-15.392 168.768 168.768 0 0 1-77.536-136.64c0-99.264 97.408-180 217.088-180 112.384 0 205.248 71.2 215.936 162.112 6.912-1.152 13.888-1.824 20.864-2.08 6.24 0.256 12.48 0.896 18.656 1.856C693.28 344.896 583.104 256 448.544 256zM799.36 576c-17.952 0.064-32.48 19.232-32.448 42.848a170.08 170.08 0 0 1-15.136 46.656c-8.48 10.016-14.08 23.616-15.776 38.496 12.672-4.736 24.128-13.824 33.184-26.336 9.28-7.84 19.584-13.344 30.4-16.16 17.952-0.096 32.48-19.296 32.416-42.88-0.064-23.616-14.656-42.688-32.64-42.624zM640 544c-12.672 4.704-24.128 13.792-33.216 26.304a77.44 77.44 0 0 1-30.368 16.16c-17.952 0.064-32.48 19.296-32.416 42.88 0.064 23.616 14.656 42.72 32.64 42.656 17.92-0.064 32.448-19.2 32.448-42.848 2.88-16.576 8-32.416 15.104-46.688 8.48-10.016 14.08-23.616 15.808-38.464z m42.88-64c-23.68 0-42.88 14.528-42.88 32.416 0 17.92 19.2 32.448 42.88 32.448 16.64 2.912 32.448 8.096 46.656 15.2 10.08 8.512 23.648 14.144 38.464 15.936-4.672-12.64-13.696-24.096-26.176-33.216a77.632 77.632 0 0 1-16-30.368c0-17.92-19.232-32.416-42.912-32.416z"
                                                fill="#515151" p-id="111936"></path>
                                    </svg>
                              </li>
                              <li class="flex mar-lft">
                                    <svg t="1697473687147" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                          xmlns="http://www.w3.org/2000/svg" p-id="18419" width="30" height="30">
                                          <path d="M435.6352 429.568c-136.9856 6.3232-247.7056 79.6928-247.7056 171.2128 0 91.392 110.7456 160.1024 247.7056 153.7024 137.0624-6.2464 248.0128-92.0576 248.0128-183.4496C683.648 479.744 572.6976 423.2448 435.6352 429.568zM528.9472 659.7632c-41.9584 54.144-124.9536 80.5632-205.5424 36.9152-38.3488-20.8128-36.9408-61.6704-36.9408-61.6704s-15.9232-129.0496 121.856-145.1776C546.2784 473.856 570.9056 605.5936 528.9472 659.7632z"
                                                fill="#515151" p-id="18420"></path>
                                          <path d="M436.5568 573.3376c-8.832 6.4-10.624 18.6368-5.8368 26.24 4.608 7.808 15.3344 8.704 24.0128 2.2016 8.5248-6.7328 11.8272-18.4576 7.1936-26.24C457.344 567.9616 446.7456 565.76 436.5568 573.3376z"
                                                fill="#515151" p-id="18421"></path>
                                          <path d="M371.2512 591.104c-25.7536 2.6624-44.16 25.088-44.16 46.5408 0 21.504 20.736 36.352 46.4384 33.3312 25.6256-2.9184 46.464-22.7328 46.464-44.16C420.0192 605.312 400.7936 588.2624 371.2512 591.104z"
                                                fill="#515151" p-id="18422"></path>
                                          <path d="M793.6 0 230.4 0C103.1424 0 0 103.1424 0 230.4l0 563.2c0 127.2576 103.1424 230.4 230.4 230.4l563.2 0c127.2576 0 230.4-103.1424 230.4-230.4L1024 230.4C1024 103.1424 920.8576 0 793.6 0zM792.064 661.9904c-56.4736 119.9616-242.688 178.3296-380.6976 167.5264C280.2176 819.2 111.616 775.6288 94.208 616.9344c0 0-9.216-71.8848 60.4672-164.8896 0 0 100.224-139.9552 216.96-179.8912 116.8384-39.7568 130.4832 27.52 130.4832 67.2768-6.1952 33.7152-17.8176 53.5808 26.0352 39.9616 0 0 114.8416-53.2736 162.1248-6.016 38.1184 38.144 6.2976 90.6496 6.2976 90.6496s-15.8208 17.5104 16.7168 23.808C745.9328 494.3104 848.5376 541.8496 792.064 661.9904zM678.8352 330.5728c-12.4928 0-22.528-10.112-22.528-22.5024 0-12.6208 10.0352-22.7584 22.528-22.7584 0 0 140.8-26.0352 123.9552 125.2608 0 0.896-0.1024 1.6128-0.3072 2.4064-1.5872 10.7264-11.008 18.944-22.0928 18.944-12.544 0-22.7584-10.0352-22.7584-22.5536C757.632 409.3696 779.9552 308.2752 678.8352 330.5728zM916.8128 451.584l-0.2048 0c-3.712 25.6-16.4096 27.648-31.5392 27.648-18.0992 0-32.7168-11.3664-32.7168-29.4912 0-15.6928 6.5024-31.6416 6.5024-31.6416 1.92-6.6048 17.2288-47.6672-10.112-109.056-50.0736-84.096-150.912-85.3248-162.816-80.5376-12.0064 4.7104-29.7216 7.0656-29.7216 7.0656-18.2272 0-32.8192-14.8224-32.8192-32.8448 0-15.1296 10.112-27.9296 23.936-31.8464 0 0 0.3072-0.512 0.768-0.5888 0.9984-0.2048 2.0224-1.2032 3.0976-1.3056 14.0544-2.688 64.1024-12.5184 112.768-1.1264C851.0464 188.1856 970.5984 272.384 916.8128 451.584z"
                                                fill="#515151" p-id="18423"></path>
                                    </svg>
                              </li>
                              <li class="flex mar-lft">
                                    <svg t="1697472602429" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                          xmlns="http://www.w3.org/2000/svg" p-id="26663" width="30" height="30">
                                          <path d="M1024 144.597333A144.597333 144.597333 0 0 0 879.402667 0H144.64A144.597333 144.597333 0 0 0 0 144.597333V879.36A144.597333 144.597333 0 0 0 144.597333 1024H879.36A144.597333 144.597333 0 0 0 1024 879.402667V144.64z m-175.658667 301.994667c-66.090667 0.768-127.658667-19.2-181.674666-56.192v259.669333a246.186667 246.186667 0 0 1-190.72 240.426667c-152.405333 34.773333-281.429333-75.434667-297.728-207.146667-16.981333-131.669333 66.986667-247.082667 195.712-272.981333 25.173333-5.162667 62.976-5.162667 82.517333-0.725333v139.093333c-5.973333-1.493333-11.648-2.986667-17.536-3.712-50.346667-8.874667-99.029333 16.256-119.04 62.122667a108.416 108.416 0 0 0 34.133333 130.218666c34.005333 26.624 71.765333 30.336 110.208 12.586667 38.485333-17.024 59.178667-48.085333 63.573334-90.282667 0.768-5.888 0.725333-12.544 0.725333-19.2V141.056c0-14.08 0.128-13.44 14.165333-13.44h110.250667c8.106667 0 11.093333 1.194667 11.818667 10.794667 5.930667 85.845333 71.082667 158.933333 154.666666 170.026666 8.874667 1.450667 18.389333 2.048 28.928 2.773334v135.381333z"
                                                p-id="26664" fill="#515151"></path>
                                    </svg>
                              </li>
                              <li class="flex mar-lft">
                                    <svg t="1697473578838" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                          xmlns="http://www.w3.org/2000/svg" p-id="12044" width="30" height="30">
                                          <path d="M852 0l-680 0c-94.592 0-172 77.408-172 172l0 680c0 94.592 77.408 172 172 172l680 0c94.592 0 172-77.408 172-172l0-680c0-94.592-77.408-172-172-172zM384 832l-128 0 0-448 128 0 0 448zM320 320c-35.36 0-64-28.64-64-64s28.64-64 64-64 64 28.64 64 64-28.64 64-64 64zM832 832l-128 0 0-256c0-35.36-28.64-64-64-64s-64 28.64-64 64l0 256-128 0 0-448 128 0 0 79.456c26.4-36.256 66.752-79.456 112-79.456 79.52 0 144 71.648 144 160l0 288z"
                                                fill="#515151" p-id="12045"></path>
                                    </svg>
                              </li>
                        </ul>
                  </div>

                  <div class="copyright-menu-area ali-center">
                        <div class="copyright-menu-cards">
                              <ul>
                                    <li :class="['copyright-menu-list', { 'copy-menu-active': copyRightItem.openIsShow }]"
                                          v-for="(copyRightItem, copyRightIndex) in data.copyrightMenuList"
                                          :key="copyRightIndex"
                                          @click="getCopyRightBtnChange(copyRightIndex, copyRightItem.openIsShow)">
                                          <div class="flex jus-space-bet ali-center">
                                                <p>{{ copyRightItem.menu_text }}</p>
                                                <svg t="1698508224516" class="icon pc-dis" viewBox="0 0 1024 1024"
                                                      version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13140" width="14"
                                                      height="14">
                                                      <path d="M511.999488 634.683157 132.797004 255.480672l-66.916039 66.916039 446.1175 446.122617 446.1175-446.122617-66.916039-66.916039L511.999488 634.683157zM511.999488 634.683157"
                                                            fill="#5f6464" p-id="13141"></path>
                                                </svg>
                                          </div>
                                          <ul>
                                                <li class="sub-list"
                                                      v-for="(copyRightSubItem, copyRightSubIndex) in copyRightItem.subList"
                                                      :key="copyRightSubIndex">
                                                      <a href="">{{ copyRightSubItem.sub_text }}</a>
                                                </li>
                                          </ul>
                                    </li>
                              </ul>
                        </div>
                        <!-- 版权区LOGO -->
                        <div class="copyright-logo-area">
                              <img src="@/assets/logo-en.png" alt="">
                        </div>
                  </div>

                  <div class="footer-area">
                        <ul class="app-copyright flex flex-warp">
                              <li v-for="(footerItem, footerIndex) in footerList" :key="footerIndex"><a href="">{{
                                    footerItem.footer_text }}</a></li>
                        </ul>
                        <div class="gs-copy-tips" v-html="copyrightContent"></div>
                  </div>
            </div>
      </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
import { copyRightList, footerList, copyrightContent } from '@/config/assets.config'
// props 数据传参
let propData = defineProps({ isTransparentBackground: { default: false } })
let data = reactive({
      copyrightMenuList: copyRightList
})

// 显示 \ 隐藏 copyright 区按钮
let getCopyRightBtnChange = (e: number, bol: boolean) => {
      data.copyrightMenuList[e].openIsShow = !bol
}

</script>